{% extends "finance/base.html" %}
{% load static %}
{% load custom_filters %}

{% block content %}
<style>
    /* (sama seperti style Anda sebelumnya, disingkat) */
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
    }

    .center-label {
        display: block;
        width: 100%;
        text-align: center;
    }

    .small-input {
        padding: .35rem .5rem;
        font-size: .9rem;
    }

    .journal-modal {
        max-width: 95% !important;
        width: 95% !important;
    }

    .action-btn,
    .status-btn {
        min-width: 78px;
        height: 40px;
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }
</style>

<div class="row align-items-center px-3 py-3">

    <!-- LEFT : TITLE -->
    <div class="col-md-4">
        <h2 class="mb-0" style="font-size: 3rem; font-weight: 500;">
            JV Approval
        </h2>
    </div>

    <!-- CENTER : SEARCH -->
    <div class="col-md-4 d-flex justify-content-center">
        <form method="GET" class="d-flex gap-2 w-100" style="max-width: 350px;">
            <input type="text" name="search_ref" class="form-control" placeholder="Search Ref No..."
                value="{{ search_ref }}">
            <button class="btn btn-secondary btn-sm">Search</button>

            {% if search_ref %}
            <a href="{% url 'journal_approval' %}" class="btn btn-outline-secondary btn-sm">
                Reset
            </a>
            {% endif %}
        </form>
    </div>

    <!-- RIGHT : ACTION BUTTONS -->
    <div class="col-md-4 d-flex justify-content-end align-items-center gap-2">

        {% if journal_header %}

        {# === JOURNAL SENDIRI === #}
        {% if journal_header.entryby == request.user.username %}
        <span class="badge bg-secondary status-btn">
            Created by You
        </span>
        {% else %}

        {# ===== APPROVE ===== #}
        {% if journal_header and not journal_header.approved and not journal_header.void %}
        <form method="post" action="{% url 'approve_journal' journal_header.ref_no %}">
            {% csrf_token %}
            <button class="btn btn-success action-btn">
                Approve
            </button>
        </form>
        {% endif %}

        {# ===== UNPOST ===== #}
        {% if journal_header.approved and journal_header.posted and not journal_header.void %}
        <form method="post" action="{% url 'unpost_journal' journal_header.ref_no %}" class="d-inline">
            {% csrf_token %}
            <button class="btn btn-success action-btn" onclick="return confirm('Unpost journal ini?');">
                Unpost
            </button>
        </form>
        {% endif %}

        {# ===== VOID ===== #}
        {% if not journal_header.approved and not journal_header.posted and not journal_header.void %}
        <form method="post" action="{% url 'void_journal' journal_header.ref_no %}" class="d-inline">
            {% csrf_token %}
            <button class="btn btn-danger action-btn"
                onclick="return confirm('VOID journal ini? Tindakan tidak dapat dibatalkan');">
                VOID
            </button>
        </form>
        {% endif %}

        {% endif %}

        {# ===== STATUS BADGE ===== #}
        {% if journal_header.void %}
        <span class="badge bg-danger status-btn">VOID</span>
        {% elif journal_header.approved %}
        <span class="badge bg-success status-btn">APPROVED</span>
        {% endif %}

        {% endif %}

        {% if last_ref %}
        <a href="{% url 'journal_pdf' last_ref %}" class="btn btn-secondary action-btn" target="_blank">
            PDF
        </a>
        {% endif %}

        <!-- <a href="{% url 'export_to_excel_journal' %}?ref_no={{ last_ref }}" class="btn btn-success">
            Excel
        </a> -->

    </div>


</div>

{% if journal_header %}
<div class="card mb-3 shadow-sm">

    <div class="card-body py-2 small">

        <!-- ================= ROW 1 : MAIN IDENTIFIER ================= -->
        <div class="row mb-1 align-items-center">
            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Ref No</span> :
                <span class="fw-bold fs-5">
                    {{ journal_header.ref_no|format_ref_no }}
                </span>
            </div>

            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Currency</span> :
                {{ journal_header.currsign }}
            </div>

            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Reverse</span> :
                <input type="checkbox" disabled {% if journal_header.reverse %}checked{% endif %}>
            </div>


        </div>

        <!-- ================= ROW 2 : FINANCIAL CONTEXT ================= -->
        <div class="row mb-1">

            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Date</span> :
                {{ journal_header.date|date:"d-m-Y" }}
            </div>


            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Rate</span> :
                {{ journal_header.rate|format_currency_dynamic:journal_header.currsign }}
            </div>

            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Entry By</span> :
                {{ journal_header.entryby }}
            </div>

            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Status</span> :
                {% if journal_header.void %}
                <span class="badge bg-danger">VOID</span>
                {% elif journal_header.approved %}
                <span class="badge bg-success">APPROVED</span>
                {% else %}
                <span class="badge bg-warning text-dark">NOT APPROVED</span>
                {% endif %}
            </div>

        </div>
    </div>
</div>
{% endif %}


<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="journalTable">
        <thead class="table-dark">
            <tr>
                <th>No</th>
                <th>Account</th>
                <th>CC No</th>
                <th>AFE No</th>
                <th>Description</th>
                <th>Vendor</th>
                <th>Contract No</th>
                <th>Invoice No</th>
                <th>Org Amt</th>
                <th>USD Amt</th>
            </tr>
        </thead>

        <tbody>
            {% for j in journal %}
            <tr>

                <!-- No -->
                <td>{{ forloop.counter }}</td>

                <!-- Account -->
                <td>
                    <div>
                        <strong>{{ j.acct_no|format_acct_no }}</strong><br>
                        <small class="text-muted">{{ j.acct_name }}</small>
                    </div>
                </td>
                <td>
                    {% if j.cc_no %}
                    <strong>{{ j.cc_no_id }}</strong><br>
                    <small class="text-muted">{{ j.cc_no.cc_name }}</small>
                    {% else %}
                    -
                    {% endif %}
                </td>
                <td>
                    {% if j.afeno %}
                    <strong>{{ j.afeno_id }}</strong><br>
                    <small class="text-muted">{{ j.afeno.afename }}</small>
                    {% else %}
                    -
                    {% endif %}
                </td> <!-- Description -->
                <td>{{ j.descript }}</td>

                <!-- Vendor -->
                <td>{{ j.vendorcode|default:"-" }}</td>

                <!-- Contract No -->
                <td>{{ j.contractno|default:"-" }}</td>

                <!-- Invoice No -->
                <td>{{ j.invno|default:"-" }}</td>

                <!-- Org Amt -->
                <td class="text-end">
                    {{ j.oriamt|format_currency_dynamic:journal_header.currsign }}
                </td>

                <!-- USD Amt -->
                <td class="text-end">
                    {{ j.usdamt|format_currency_dynamic:"USD" }}
                </td>

            </tr>
            {% empty %}
            <tr>
                <td colspan="9" class="text-center text-muted">
                    No Journal entries found
                </td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr class="table-light fw-bold">
                <td colspan="8" class="text-end">
                    TOTAL
                </td>

                <td class="text-end">
                    {{ total_ori|format_currency_dynamic:journal_header.currsign }}
                </td>

                <td class="text-end">
                    {{ total_usd|format_currency_dynamic:"USD" }}
                </td>
            </tr>
        </tfoot>
    </table>
</div>


<!-- ================= Journal Modal (form utama + detail table) ================= -->
<div class="modal fade" id="journalModal" tabindex="-1" aria-labelledby="journalModalLabel" aria-hidden="true">
    <div class="modal-dialog journal-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="journalModalLabel">Add Journal Entry</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <form id="journalForm" method="POST" action="{% url 'save_journal' %}">
                    {% csrf_token %}
                    <input type="hidden" name="journal_id" id="journal_id">

                    <div class="row mb-2">

                        <div class="col-md-4">
                            <label>JV Code</label>
                            <select class="form-control" name="jvcode" id="jvcode" required>
                                <option value="">-- Select JV Code --</option>
                                {% for jv in jvcodes %}
                                <option value="{{ jv.jvcode }}">{{ jv.jvcode }} - {{ jv.jvname }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label>Date</label>
                            <input type="date" class="form-control" name="date" id="date" required>
                        </div>

                        <div class="col-md-3">
                            <label>Currency</label>
                            <select class="form-control" id="currsign" name="currsign" required>
                                <option value="">-- Select Currency --</option>
                                {% for c in matauangs %}
                                <option value="{{ c.currsign }}">{{ c.currsign }} - {{ c.currname }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-md-auto" style="max-width: 130px;">
                            <label>Rate</label>
                            <input type="text" class="form-control format-rate" name="rate" id="rate" required>
                        </div>

                        <div class="col-md-1 d-flex align-items-end">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="reverse" name="reverse">
                                <label class="form-check-label" for="reverse">Reverse</label>
                            </div>
                        </div>

                    </div>

                    <div class="row mt-4 mb-2">
                        <div class="col-md-12 text-end">
                            <button type="button" class="btn btn-secondary" onclick="addEmptyRow()">
                                + Add Detail
                            </button>
                        </div>
                    </div>

                    <!-- Detail table: rows created by selecting from browse modals -->
                    <div class="table-responsive mb-2">
                        <table class="table table-bordered w-100" id="detailTable">
                            <thead class="table-dark">
                                <tr>
                                    <th>Account</th>
                                    <th style="width: 28%;">Description</th>
                                    <th class="text-end">Org Amount</th>
                                    <th class="text-end">USD Amount</th>
                                    <th style="width: 80px;">Action</th>
                                </tr>
                            </thead>
                            <tbody id="detailBody">
                                <!-- rows appended here by JS -->
                            </tbody>
                        </table>
                    </div>

                    <div class="mb-3">
                        <small class="text-muted">Pilih beberapa record di Browse, lalu klik "Add Selected" untuk
                            menambahkan ke detail.</small>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- ================= JS: browse, add detail, helpers ================= -->
<script>
    /* --- helper to create a new detail row --- */
    function addDetailRow(detail = {}) {
        const tbody = document.getElementById('detailBody');

        const tr = document.createElement('tr');

        // display value = formatted acct_no; hidden value = raw acct_no
        const rawAcct = detail.acct_no || '';
        const displayAcct = detail.acct_no_display || formatAcctNoJS(rawAcct);

        tr.innerHTML = `
        <!-- ACCOUNT -->
        <td>
            <div class="input-group">
                <input type="text" class="form-control form-control-sm" 
                       name="acct_no_display[]" 
                       value="${displayAcct}" 
                       readonly>
                <button type="button" class="btn btn-sm btn-secondary" 
                        onclick="openBrowseAccount(this)">
                    Browse
                </button>
            </div>
            <input type="hidden" name="acct_no[]" value="${rawAcct}">
        </td>

        <!-- DESCRIPTION -->
        <td>
            <input type="text" class="form-control form-control-sm" 
                   name="descript[]" 
                   value="${detail.descript || ''}">
        </td>

        <!-- ORG AMT -->
        <td>
            <input type="text" class="form-control form-control-sm currency-input" 
                   name="oriamt[]" 
                   value="${detail.oriamt || ''}">
        </td>

        <!-- USD AMT -->
        <td>
            <input type="text" class="form-control form-control-sm currency-input" 
                   name="usdamt[]" 
                   value="${detail.usdamt || ''}">
        </td>

        <!-- ACTION -->
        <td>
            <button type="button" class="btn btn-sm btn-danger" 
                    onclick="this.closest('tr').remove();">
                Remove
            </button>
        </td>
    `;

        tbody.appendChild(tr);
        // set the currentTargetRow to the newly added row so Browse will fill it
        window.currentTargetRow = tr;
        formatCurrencyInputs();
        rebindAutoUSD();
        bindAutoUSDRow(tr); // bind this row's auto-usd as well
    }

    /* --- format currency inputs --- */
    function formatCurrencyInputs() {
        document.querySelectorAll('.currency-input').forEach(input => {
            input.removeEventListener('input', window._currencyHandler || function () { });
            const handler = function () {
                let val = input.value.replace(/[^0-9.]/g, '');
                input.value = val.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            };
            input.addEventListener('input', handler);
            window._currencyHandler = handler;
        });
    }

    // === AUTO CALCULATE USD AMOUNT (ori / rate) ===
    function setupAutoUSD() {
        document.querySelectorAll('input[name="oriamt[]"]').forEach(input => {
            // avoid duplicate handlers
            if (input._hasAutoUSD) return;
            input._hasAutoUSD = true;
            input.addEventListener('input', function () {
                const row = this.closest('tr');
                const usdInput = row.querySelector('input[name="usdamt[]"]');
                const rate = parseFloat(document.getElementById('rate').value.replace(/,/g, '')) || 0;

                let ori = parseFloat(this.value.replace(/,/g, '')) || 0;

                // Jika currency USD → USD amount = ORI amount
                if (document.getElementById('currsign').value === 'USD') {
                    usdInput.value = ori.toFixed(2);
                    return;
                }

                if (rate > 0) {
                    let usd = ori / rate;
                    usdInput.value = usd.toFixed(2);
                } else {
                    usdInput.value = "";
                }
            });
        });
    }

    function rebindAutoUSD() {
        setupAutoUSD();
    }

    /* --- Browse Account --- */
    document.getElementById('searchAccount').addEventListener('keyup', function () {
        const f = this.value.toLowerCase();
        document.querySelectorAll('#accountTableBody tr').forEach(tr => {
            tr.style.display = tr.textContent.toLowerCase().includes(f) ? '' : 'none';
        });
    });

    document.getElementById('addAccountSelected').addEventListener('click', function () {
        // choose all checked accounts and add values into the current target row(s)
        const checked = Array.from(document.querySelectorAll('.account-check:checked'));
        if (checked.length === 0) {
            alert("Please select at least one account from Browse.");
            return;
        }

        checked.forEach(cb => {
            // fallback: try window.currentTargetRow, otherwise choose last detail row
            let tr = window.currentTargetRow || document.querySelector('#detailBody tr:last-child');
            if (!tr) {
                // if no row exists, create one and use it
                addEmptyRow();
                tr = window.currentTargetRow;
            }

            // set display (formatted) and hidden raw value
            const displayInput = tr.querySelector('input[name="acct_no_display[]"]');
            const hiddenInput = tr.querySelector('input[name="acct_no[]"]');

            if (displayInput) displayInput.value = formatAcctNoJS(cb.dataset.acct);
            if (!hiddenInput) {
                hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'acct_no[]';
                tr.appendChild(hiddenInput);
            }

            hiddenInput.value = cb.dataset.acct;
            console.log("ACCT RAW SET:", hiddenInput.value);   // DEBUG WAJIB


            // uncheck the checkbox in browse
            cb.checked = false;

            // after filling one row, reset currentTargetRow so next checked fills next row (if user expects)
            // set currentTargetRow to next empty row if exists, otherwise create one
            const nextRow = document.querySelector('#detailBody tr:last-child');
            window.currentTargetRow = nextRow;
        });

        bootstrap.Modal.getInstance(document.getElementById('browseAccountModal')).hide();
    });


    /* --- Reset form for Add --- */
    function resetForm() {
        document.getElementById('journalForm').reset();
        document.getElementById('journalForm').action = "{% url 'save_journal' %}";
        document.getElementById('journalModalLabel').innerText = 'Add Journal Entry';
        document.getElementById('journal_id').value = "";
        // clear detail rows
        document.getElementById('detailBody').innerHTML = '';

        // WAJIB BUAT 1 BARIS DEFAULT
        addEmptyRow();
    }

    /* --- Edit existing single Journal (ke modal) --- */
    window.editJournal = function (id) {
        const row = document.querySelector(`tr[data-id="${id}"]`);
        if (!row) return;

        // ✅ CEK APPROVED
        if (row.dataset.approved === "True" || row.dataset.approved === "true") {
            alert("Journal already Approved, cannot edit this journal");
            return;
        }

        document.getElementById('journalModalLabel').innerText = 'Edit Journal Voucher';
        document.getElementById('journalForm').action = "{% url 'save_journal' %}";
        document.getElementById('journal_id').value = id;

        // set header fields
        if (row.dataset.jvcode)
            document.getElementById('jvcode').value = row.dataset.jvcode;

        document.getElementById('date').value = row.dataset.date;
        document.getElementById('currsign').value = row.dataset.currsign;
        document.getElementById('rate').value = row.dataset.rate;
        document.getElementById('reverse').checked =
            (row.dataset.reverse === "True" || row.dataset.reverse === "true");

        // clear detail rows and add 1 row
        document.getElementById('detailBody').innerHTML = '';
        addDetailRow({
            acct_no: row.dataset.acct_no || '',
            descript: row.dataset.descript || '',
            oriamt: row.dataset.oriamt || '',
            usdamt: row.dataset.usdamt || ''
        });

        new bootstrap.Modal(document.getElementById('journalModal')).show();
    };

    /* --- Before submit: remove formatting (commas) from currency inputs --- */
    document.getElementById('journalForm').addEventListener('submit', function (e) {

        console.log("FORM DATA BEFORE SUBMIT");

        document.querySelectorAll('input[name="acct_no[]"]').forEach((x, i) => {
            console.log(`acct_no[${i}] =`, x.value);
        });

        // remove comma formatting
        document.querySelectorAll('.currency-input').forEach(input => {
            input.value = input.value.replace(/,/g, '');
        });

        // ensure at least one non-empty acct_no[]
        const acctInputs = Array.from(document.querySelectorAll('input[name="acct_no[]"]'));
        const valid = acctInputs.some(f => f && f.value && f.value.trim() !== '');
        if (!valid) {
            alert("Detail Journal tidak boleh kosong dan harus ada Account No yang terisi!");
            e.preventDefault();
            return false;
        }
    });

    /* Initial format binding */
    formatCurrencyInputs();
    rebindAutoUSD();


    function addEmptyRow() {
        addDetailRow({
            acct_no: '',
            acct_name: '',
            descript: '',
            oriamt: '',
            usdamt: ''
        });
    }

    function openBrowseAccount(btn) {
        window.currentTargetRow = btn.closest("tr");
        new bootstrap.Modal(document.getElementById("browseAccountModal")).show();
    }

    function calculateUSD(row) {
        const curr = document.getElementById("currsign").value;
        const rateInput = document.getElementById("rate");
        const rate = parseFloat((rateInput && rateInput.value || '').replace(/,/g, "")) || 0;

        const oriInput = row.querySelector('input[name="oriamt[]"]');
        const usdInput = row.querySelector('input[name="usdamt[]"]');

        let ori = parseFloat((oriInput && oriInput.value || '').replace(/,/g, "")) || 0;

        // Jika currency USD → USD amount = ORI amount (tidak dibagi rate)
        if (curr === "USD") {
            if (usdInput) usdInput.value = ori.toFixed(2);
            return;
        }

        // Currency bukan USD → USD = ORI / Rate
        if (rate > 0) {
            if (usdInput) usdInput.value = (ori / rate).toFixed(2);
        } else {
            if (usdInput) usdInput.value = "";
        }
    }

    function bindAutoUSDRow(row) {
        const oriInput = row.querySelector('input[name="oriamt[]"]');
        if (!oriInput) return;
        // avoid duplicate binding
        if (oriInput._boundForCalc) return;
        oriInput._boundForCalc = true;
        oriInput.addEventListener("input", function () {
            calculateUSD(row);
        });
    }

    // Bind untuk semua row detail
    function bindAutoUSDAll() {
        document.querySelectorAll('#detailBody tr').forEach(row => {
            bindAutoUSDRow(row);
        });
    }

    // Kalau rate berubah → hitung ulang semua row
    document.getElementById("rate").addEventListener("input", function () {
        bindAutoUSDAll();
    });

    // Ketika tambah row → bind ulang
    function rebindAutoUSD() {
        bindAutoUSDAll();
    }

    /* ============================
       FORMATTER FOR RATE INPUT
       ============================ */
    document.addEventListener("DOMContentLoaded", function () {

        const rateInput = document.getElementById("rate");

        if (rateInput) {
            rateInput.addEventListener("input", function () {
                let value = this.value;

                // Hapus semua kecuali angka dan titik
                value = value.replace(/[^0-9.]/g, "");

                // Pisahkan integer & decimal
                let parts = value.split(".");
                let intPart = parts[0];
                let decPart = parts[1] ? parts[1].slice(0, 6) : ""; // maksimal 6 digit decimal

                // Format integer dengan koma ribuan
                intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");

                // Gabungkan kembali
                this.value = decPart ? intPart + "." + decPart : intPart;
            });
        }

        // Sebelum form submit → bersihkan koma
        document.getElementById("journalForm").addEventListener("submit", function () {
            if (rateInput) {
                rateInput.value = rateInput.value.replace(/,/g, "");
            }
        });

    });

    function formatAcctNoJS(value) {
        if (!value || value.length !== 25) return value;

        return (
            value.slice(0, 4) + " " +
            value.slice(4, 15) + " " +
            value.slice(15, 16) + " " +
            value.slice(16, 19) + " " +
            value.slice(19, 21) + " " +
            value.slice(21, 22) + " " +
            value.slice(22, 25)
        );
    }

    document.getElementById("currsign").addEventListener("change", function () {
        const curr = this.value;
        const rateInput = document.getElementById("rate");
        const date = document.getElementById("date").value;

        if (!curr) return;

        // Jika USD → rate = 1
        if (curr === "USD") {
            rateInput.value = "1";
            bindAutoUSDAll();
            return;
        }

        // Jika belum pilih tanggal → jangan fetch API
        if (!date) {
            alert("Please select Date first.");
            this.value = "";
            return;
        }

        // Fetch rate dari backend
        fetch(`/journal/get-rate/?curr=${curr}&date=${date}`)
            .then(res => res.json())
            .then(data => {
                if (data.rate > 0) {
                    rateInput.value = data.rate;
                } else {
                    rateInput.value = "";
                    alert("Rate tidak ditemukan!");
                }
                bindAutoUSDAll();
            });
    });

    document.addEventListener("DOMContentLoaded", function () {

        const currSelect = document.getElementById("currsign");
        const rateInput = document.getElementById("rate");
        const dateInput = document.getElementById("date");

        function fetchRate() {
            const curr = currSelect.value;
            const date = dateInput.value;

            if (!curr) return;

            // Jika USD → rate = 1
            if (curr === "USD") {
                rateInput.value = "1";
                if (typeof bindAutoUSDAll === "function") bindAutoUSDAll();
                return;
            }

            if (!date) {
                alert("Please select Date first.");
                currSelect.value = "";
                return;
            }

            fetch(`/journal/get-rate/?curr=${curr}&date=${date}`)
                .then(res => res.json())
                .then(data => {
                    if (data.rate > 0) {
                        rateInput.value = data.rate;
                    } else {
                        rateInput.value = "";
                        alert("Rate tidak ditemukan!");
                    }

                    if (typeof bindAutoUSDAll === "function") bindAutoUSDAll();
                });
        }

        currSelect.addEventListener("change", fetchRate);
        dateInput.addEventListener("change", fetchRate);

    });

</script>

{% endblock %}